<template>
  <div class="home-container">
    <div class="main">
      <div class="head">
        <div class="point" />
        <div class="line" />
        <div class="icon" />
        <div class="text">申报小帮手</div>
        <div class="line" />
        <div class="point" />
      </div>
      <div class="content">
        <div class="title">您还未申请过事项，可进行如下操作：</div>
        <div class="content-container">
          <div class="container-item">
            <img src="@/assets/img/home/item_icon1.png" alt="" />
            <div class="item-text1">新手上路</div>
            <div class="item-text2">首次登录系统</div>
            <div class="item-text3">
              <img src="@/assets/img/home/notice_icon1.png" alt="" />
              <span class="notice" @click="viewPdf">查看操作手册</span>
            </div>
          </div>
          <div class="container-item">
            <img src="@/assets/img/home/item_icon2.png" alt="" />
            <div class="item-text1">用户信息</div>
            <div class="item-text2">{{ showInfoText }}</div>
            <div class="item-text3" @click="toInfo">
              <img src="@/assets/img/home/notice_icon2.png" alt="" />
              <span class="notice">{{ showInfoBtn }}</span>
            </div>
          </div>
          <div class="container-item">
            <img src="@/assets/img/home/item_icon1.png" alt="" />
            <div class="item-text2">若您已经熟知</div>
            <div class="item-text2">申请流程及相关事宜</div>
            <div class="item-text3">
              <el-button type="primary" size="mini" @click="apply"
                >立即申请</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    userType() {
      return this.$store.state.user.userInfo.userType;
    },
    // 生成个人信息text
    showInfoText() {
      if (this.$store.state.user.userInfo.isCompleteInfo != 1) {
        return '你的信息还未完善';
      } else {
        return '前去查看个人信息';
      }
    },
    // 生成个人信息按钮
    showInfoBtn() {
      if (this.$store.state.user.userInfo.isCompleteInfo != 1) {
        return '完善信息';
      } else {
        return '查看信息';
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    // 跳转到个人信息
    toInfo() {
      if (this.userType == 1) {
        this.$router.push('/userInfo');
      } else {
        this.$router.push('/companyInfo');
      }
    },
    // 跳转到申请
    apply() {
      if (this.userType == 1) {
        this.$router.push('/personalNeedApply');
      } else {
        this.$router.push('/companyNeedApply');
      }
    },
    // 查看操作手册
    viewPdf(){
      window.open(this.$store.state.user.manual.fileUri)
    }
  },
};
</script>
<style lang="scss" scoped>
.home-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  .main {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .head {
      display: flex;
      align-items: center;
      .point {
        margin: 0px 3px;
        width: 5px;
        height: 5px;
        background: #bdbdbd;
        border-radius: 50%;
      }
      .line {
        width: 300px;
        height: 1px;
        background: #bdbdbd;
      }
      .icon {
        margin-left: 11px;
        width: 22px;
        height: 22px;
        background: url('~@/assets/img/home/head_icon.png') 100% 100% no-repeat;
      }
      .text {
        margin-left: 3px;
        margin-right: 16px;
        font-size: 20px;
        font-weight: 500;
        color: #333333;
      }
    }
    .content {
      width: 607px;
      margin-top: 38px;
      .title {
        font-size: 16px;
        color: #333333;
      }
      .content-container {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .container-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #333333;
          .item-text1 {
            margin-top: 3px;
            font-size: 18px;
            font-weight: 600;
          }
          .item-text2 {
            margin-top: 4px;
            font-size: 14px;
          }
          .item-text3 {
            margin-top: 4px;
            display: flex;
            .notice {
              margin-left: 2px;
              color: #508ce9;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
